<template>
	<view class="step_a_row">
		<view class="title">
			请填写您的基本身体数据
		</view>
		<view class="from_row">
			<view class="from_item">
				<view class="label">
					性别
				</view>
				<view class="value">
					<view class="select_row">
						<view :class="{select_item:true,active_sex:sex == 1}" @click="()=>{this.sex = 1}">
							<text class="tn-icon-sex-male"></text>
							男
						</view>
						<view :class="{select_item:true,active_sex:sex == 2}" @click="()=>{this.sex = 2}">
							<text class="tn-icon-sex-female"></text>
							女
						</view>
					</view>
				</view>
			</view>
			<view class="from_item">
				<view class="label">
					年龄
				</view>
				<view class="value">
					<view class="input_box">
						<input type="number" placeholder="请输入您的年龄" v-model="age" />
					</view>
				</view>
			</view>
			<view class="from_item">
				<view class="label">
					身高
				</view>
				<view class="value">
					<view class="input_box">
						<input type="number" placeholder="请输入您的身高" v-model="height" />
						<view class="unit">
							cm
						</view>
					</view>
				</view>
			</view>
			<view class="from_item">
				<view class="label">
					体重
				</view>
				<view class="value">
					<view class="input_box">
						<input type="number" placeholder="请输入您的体重" v-model="weight" />
						<view class="unit">
							kg
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex: null,
				height: null,
				weight: null,
				age: null
			};
		},
		onLoad(option) {},
		methods: {
			validateForm() {
				let {
					sex,
					height,
					weight,
					age
				} = this

				// 表单校验
				if (!sex) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return false
				}

				if (!age) {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none'
					})
					return false
				}

				if (!height) {
					uni.showToast({
						title: '请输入身高',
						icon: 'none'
					})
					return false
				}

				if (!weight) {
					uni.showToast({
						title: '请输入体重',
						icon: 'none'
					})
					return false
				}
				return true
			},
			getFormData() {
				let {
					sex,
					height,
					weight,
					age
				} = this
				let formData = {
					sex,
					height,
					weight,
					age
				}
				return formData
			}
		}
	}
</script>

<style lang="less">
	.step_a_row {
		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin: 60rpx 0;
			margin-top: 0;
			color: #000;
		}

		.from_row {
			.from_item {
				margin-bottom: 60rpx;

				.label {
					margin-bottom: 20rpx;
					font-weight: 600;
					font-size: 28rpx;
				}

				.value {
					.input_box {
						padding: 10rpx;
						border-radius: 12rpx;
						border: 1px solid rgba(110, 88, 170, 0.1);
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-right: 20rpx;

						.unit {
							color: rgba(124, 124, 126, 1);
						}

						input {}
					}

					.select_row {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.select_item {
							width: 45%;
							border-radius: 8px;
							text-align: center;
							padding: 15rpx 0;
							color: #6e58aa;
							border: 2rpx solid #6e58aa;
						}

						.active_sex {
							background-color: #6e58aa;
							color: #fff;
						}
					}
				}
			}


		}
	}
</style>